<template>
  <div class="publish">
    <app-bar back title="发布阵容">
      <p slot="right" @click="publish" class="zhaomu">发布</p>
    </app-bar>
    <div class="content" v-if="!alldataLoading">
      <forms-ide v-model="currentFill" :forms="forms" :current="currentFill" />
      <transition name="bounce">
        <select-heroe
          v-if="showSelectHeroes"
          v-model="forms"
          :fill="currentFill"
          @next="next"
        ></select-heroe>
      </transition>
      <transition name="bounce">
        <select-tactic
          v-if="showSelecttactic"
          v-model="forms"
          :fill="currentFill"
          @next="next"
        ></select-tactic>
      </transition>
      <transition name="bounce">
        <select-book
          v-if="showSelectbook"
          v-model="forms"
          :fill="currentFill"
          @next="next"
        ></select-book>
      </transition>
    </div>
    <div class="loading" v-else>
      <van-loading color="#1989fa" />
    </div>

    <van-overlay :show="enterPub" @click="enterPub = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <div class="cont">发布后阵容将无法修改，是否确认发布？</div>
          <div class="btns">
            <div class="item" @click="enterPub = false">取消</div>
            <div class="line"></div>
            <div class="item" @click="enterPublish">确认</div>
          </div>
        </div>
      </div>
    </van-overlay>

    <van-overlay :show="alert" @click="alert = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <div class="cont">退出页面后阵容信息无法保存，是否确认退出？</div>
          <div class="btns">
            <div class="item" @click="alert = false">留下</div>
            <div class="line"></div>
            <div class="item" @click="enter">退出</div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapState } from "vuex";
import FormsIde from "./components/FormsIde/index.vue";
import SelectHeroe from "./components/SelectHeroe/index.vue";
import SelectTactic from "./components/SelectTactic/index.vue";
import SelectBook from "./components/SelectBook/index.vue";
export default {
  name: "MyHeroe",
  computed: {
    ...mapState("data", ["heroesList", "userHeroes", "alldataLoading"]),
    showSelectHeroes() {
      let arr = ["chef_hero", "sub_hero_one", "sub_hero_two"];
      return arr.indexOf(this.currentFill) !== -1;
    },
    showSelecttactic() {
      return this.currentFill.indexOf("tactic") !== -1;
    },
    showSelectbook() {
      return this.currentFill.indexOf("book") !== -1;
    },
  },
  components: {
    FormsIde,
    SelectBook,
    SelectHeroe,
    SelectTactic,
  },
  data() {
    return {
      alert: false,
      enterPub: false,
      edit: false,
      currentFill: "chef_hero", // 当前填充
      // 填充顺序
      fillList: [
        "chef_hero",
        "sub_hero_one",
        "sub_hero_two",
        "chef_tactic_one",
        "chef_tactic_two",
        "sub_one_tactic_one",
        "sub_one_tactic_two",
        "sub_two_tactic_one",
        "sub_two_tactic_two",
        "chef_book_one",
        "chef_book_two",
        "chef_book_three",
        "sub_one_book_one",
        "sub_one_book_two",
        "sub_one_book_three",
        "sub_two_book_one",
        "sub_two_book_two",
        "sub_two_book_three",
      ],
      // 阵容数据
      forms: {
        name: "", // 阵容标题
        // 主将
        chef_hero: null, // 主将ID
        chef_tactic_one: null, // 主将战法一
        chef_tactic_two: null, // 主将战法二
        chef_book_one: null, // 主将兵书1
        chef_book_two: null, // 主将兵书2
        chef_book_three: null, // 主将兵书3
        // 副将1
        sub_hero_one: null, // 副将1
        sub_one_tactic_one: null, // 副将1战法1
        sub_one_tactic_two: null, // 副将1战法2
        sub_one_book_one: null, // 副将1兵书1
        sub_one_book_two: null, // 副将1兵书2
        sub_one_book_three: null, // 副将1兵书3
        // 副将2
        sub_hero_two: null, // 副将2
        sub_two_tactic_one: null, // 副将2战法1
        sub_two_tactic_two: null, // 副将2战法1
        sub_two_book_one: null, // 副将2兵书1
        sub_two_book_two: null, // 副将2兵书2
        sub_two_book_three: null, // 副将2兵书3
        thought: "", // 阵容思路
      },
    };
  },
  watch: {
    forms() {
      if (!this.edit) {
        this.edit = true;
        this.pushState();
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener("popstate", this.popstateChange);
  },
  created() {
    window.injectedAll.sendUv("三国志.战略版搭配");
    window.shareData = null;
    window.injectedAll.shareInit();
  },
  methods: {
    popstateChange() {
      window.removeEventListener("popstate", this.popstateChange);
      this.alert = true;
      this.pushState();
    },
    pushState() {
      let query = this.$route.query;
      query.from = window.from;
      query.token = window.token;
      query.rand = Math.random();

      let arr = [];
      Object.keys(query).forEach((item) => {
        arr.push(`${item}=${query[item]}`);
      });
      let newUrl = location.pathname + `?${arr.join("&")}`;

      window.routerback = true;
      window.history.pushState("", "", newUrl);
      window.addEventListener("popstate", this.popstateChange);
    },
    next() {
      let index = this.fillList.indexOf(this.currentFill);
      if (this.fillList.length === index + 1) return (this.currentFill = "");
      this.currentFill = this.fillList[index + 1];
    },
    async enterPublish() {
      let forms = this.forms;
      this.enterPub = false;
      let data = await this.api.PUBLISH_FORMS(forms).catch(() => {});
      if (data) {
        window.removeEventListener("popstate", this.popstateChange);
        this.$router.go(-2);
      }
    },
    async publish() {
      let forms = this.forms;
      // return console.log(forms);
      // 判断武将是否都选择了
      if (!forms.chef_hero || !forms.sub_hero_one || !forms.sub_hero_two)
        return this.$toast("请选择武将");

      if (!forms.name) return this.$toast("请描述搭配思路");

      let arr = [
        "chef_tactic_one",
        "chef_tactic_two",
        "sub_one_tactic_one",
        "sub_one_tactic_two",
        "sub_two_tactic_one",
        "sub_two_tactic_two",
      ];
      let noselect = false;
      arr.some((item) => {
        if (!forms[item]) noselect = true;
        return noselect;
      });

      if (noselect) return this.$toast("请选择战法");

      // 发布战法
      this.$toast.loading({
        message: "加载中...",
        duration: 0,
        forbidClick: true,
      });

      Object.keys(forms).forEach((key) => {
        if (forms[key] === null) delete forms[key];
      });

      let check = await this.api.CHECK_FORMS(forms).catch(() => {});
      if (check) {
        this.$toast.clear();
        this.$nextTick(() => {
          this.enterPub = true;
        });
        // this.enterPublish(forms);
      } else {
        this.$toast.clear();
        this.$toast("已存在武将与战法完全相同的阵容搭配");
      }
    },
    enter() {
      this.alert = false;
      this.edit = false;
      this.$router.go(-2);
    },
  },
};
</script>

<style lang="scss" scoped>
.publish {
  padding: 0.46rem 0.15rem 0.15rem;
  height: 100vh;
  box-sizing: border-box;
  .zhaomu {
    position: absolute;
    top: 50%;
    right: 0.18rem;
    transform: translateY(-50%);
    height: 0.18rem;
    margin: 0;
    font-size: 14px;
    color: #ff8a69;
  }
  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  /*从上到下*/
  @keyframes fadeInDown {
    from {
      opacity: 0;
      -webkit-transform: translate(0, 1000px); /* Safari */
      transform: stranslate(0, 1000px); /* 标准语法 */
    }
    to {
      opacity: 1;
      -webkit-transform: translate(0); /* Safari */
      transform: stranslate(0); /* 标准语法 */
    }
  }

  @-webkit-keyframes fadeInDown /* Safari 与 Chrome */ {
    from {
      opacity: 0;
      -webkit-transform: translate(0, 1000px); /* Safari */
      transform: stranslate(0, 1000px); /* 标准语法 */
    }
    to {
      opacity: 1;
      -webkit-transform: translate(0); /* Safari */
      transform: stranslate(0); /* 标准语法 */
    }
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .bounce-enter-active {
    animation: fadeInDown 0.5s;
  }
  .bounce-leave-active {
    animation: fadeInDown 0.5s reverse;
  }
  ::v-deep {
    .van-overlay {
      z-index: 5;
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .block {
      width: 2.7rem;
      background: #ffffff;
      border-radius: 0.08rem;
      font-size: 0.14rem;
      color: #333333;
      .cont {
        height: 0.89rem;
        border-bottom: 1px solid #eceff5;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 0.25rem;
        line-height: 1.5em;
      }
      .btns {
        display: flex;
        .item {
          height: 0.5rem;
          flex: 1;
          width: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .line {
          height: 0.5rem;
          width: 1px;
          background: #eceff5;
        }
      }
    }
  }
}
</style>
